<style lang="less">
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

<template>
  <el-row class="container">
    <main>
      <!-- 左侧导航 -->
      <div class="main-left">

        <el-container>
          <el-header>
            <el-button @click="logout">
              退出
            </el-button>
          </el-header>
          <el-container>
            <el-aside width="200px">
              <el-menu default-active="/" class="el-menu-vertical-demo" :router="true">
                <el-menu-item index="/users">用户管理</el-menu-item>
                <el-menu-item index="/bookmarks">书签管理</el-menu-item>
              </el-menu>
            </el-aside>
            <el-main>
              <router-view class="view"></router-view>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </main>
  </el-row>
</template>
<script>
  /* eslint-disable no-extend-native */
  import {logout} from '../../api/Users.js';

  Date.prototype.toJSON = function () {
    return this.Format('yyyy-MM-dd hh:mm:ss');
  };

  export default {
    data () {
      return {};
    },
    methods: {
      logout () {
        logout().then((res) => {
          this.$router.push({path: '/login'});
        });
      }
    },
    mounted () {
    }
  };
</script>
